<template>
	<div>
		<div class = "product-container">
			<router-link
				v-for = "product in productList"
				:key = "product.id"
				:to = "{ path: `/product/${product.id}`}"
				class = "product-card-link"
			>
				<el-card class = "product-card" shadow = "hover">
					<img :src = "product.picPath" class = "product-image" alt = "Product Image" />
					<div class = "product-info">
						<h3>{{ product.title }}</h3>
						<p><strong>产地:</strong> {{ product.procity }}</p>
						<p><strong>价格:</strong> ¥{{ product.price }}</p>
						<p><strong>真实销量:</strong> {{ product.realSales }}</p>
					</div>
				</el-card>
			</router-link>
		</div>
	</div>
</template>

<script lang = "ts" setup>
import { onMounted, ref } from 'vue'
import Api from '@/api'
import { showMessage } from '@/utils/messageUtils'

//* 商品接口
interface Product {
	id: string;
	title: string;
	procity: string;
	price: number;
	realSales: string;
	picPath: string;
}

//* 商品列表
const productList = ref<Product[]>([])

//* 挂载时获取商品列表信息
onMounted(async () => {
	const { message, data, success } = await Api.getAllProducts()
	if (success) {

		showMessage(data.message, 'success')
		productList.value = data.data.map((productData: any) => ({
			id: productData.id,
			title: productData.title,
			procity: productData.procity,
			price: productData.price,
			realSales: productData.realSales,
			picPath: productData.picPath
		}))

	} else showMessage(data.message || message, 'error')

})
</script>

<style scoped>
.product-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.product-card-link {
	text-decoration: none;
	color: inherit; /* 确保链接颜色与文本一致 */
}

.product-card {
	width: calc(33.333% - 40px); /* Adjust based on the number of columns you want */
	max-width: 300px;
	min-width: 250px;
	transition: transform 0.2s;
}

.product-card:hover {
	transform: scale(1.05);
}

.product-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.product-info {
	padding: 10px;
}

.product-info h3 {
	margin-top: 0;
	font-size: 1.2em;
}

.product-info p {
	margin: 5px 0;
}
</style>